<!--
 * @Descripttion: 一户一档
 * @version:
 * @Author: ly
 * @Date: 2020-05-21 17:00:50
 * @LastEditors: wl
 * @LastEditTime: 2020-08-06 17:43:30
-->
<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form :inline="true" :model="filters" label-width="90px" label-position="right">
          <el-form-item label="选择小区:">
            <el-select v-model="filters.CID" filterable placeholder="请选择" @change="handleQuery" clearable>
              <el-option
                v-for="item in villageList"
                :key="item.CID"
                :label="item.name"
                :value="item.CID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房屋名：">
            <el-row style="width: 35%">
              <el-col :span="6">
                <el-input v-model="filters.buildName">
                  <span slot="suffix">栋</span>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-input v-model="filters.unitName">
                  <span slot="suffix">单元</span>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-input v-model="filters.floorName">
                  <span slot="suffix">层</span>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-input v-model="filters.name">
                  <span slot="suffix">号</span>
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
      <div slot="btnSearch">
        <el-button type="primary" @click="handleQuery('a')">查询</el-button>
      </div>
      <!-- 内容区域 -->
      <div slot="content">
        <el-table
          :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          border
          stripe
          style="width: 100%"
          v-loading="loading"
          element-loading-text="加载中..."
          :data="tableData"
        >
          <el-table-column width="150" prop="CIDD" label="所在小区" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.CIDD ? scope.row.CIDD : "-" }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="name" label="房屋号" align="center">
            <template slot-scope="scope">
              <span>
                {{
                  scope.row.buildName +
                  "栋" +
                  scope.row.unitName +
                  "单元" +
                  scope.row.floorName +
                  "层" +
                  scope.row.name +
                  "号"
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="personNum" label="访问次数" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.count }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="fangtype" label="房屋类型" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.fangtype == 1">自住</span>
              <span v-else-if="scope.row.fangtype == 2">出租</span>
              <span v-else-if="scope.row.fangtype == 3">商铺</span>
              <span v-else-if="scope.row.fangtype == 4">闲置</span>
              <span v-else-if="scope.row.fangtype == 5">营业场所</span>
              <span v-else-if="scope.row.fangtype == 6">住房商用</span>
              <span v-else>未设置</span>
            </template>
          </el-table-column>
          <el-table-column prop="kongxian" label="是否闲置" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.kongxian == 1">是</span>
              <span v-if="scope.row.kongxian == 2">否</span>
              <span v-if="!scope.row.kongxian">未设置</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 底部区域 -->
      <div slot="footer">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.pageSize"
          :total="totalSize"
          style="float: right"
        ></el-pagination>
      </div>
    </page>
  </div>
</template>

<script>
import { Loading } from "element-ui";
export default {
  data() {
    return {
      // 小区列表
      villageList: [],
      loading: true,
      familyLoading: true,
      // 弹框
      dialogTableVisible: false,
      dialogmarkVisible: false,
      info: {
        owner_name: "",
        owner_phone: "",
        fangtype: "",
        fangmark: "",
        remark: "",
        kongxian: ""
      },
      options: [
        {
          typesearch: "1",
          label: "是"
        },
        {
          typesearch: "2",
          label: "否"
        }
      ],
      type_options: [
        {
          value: "1",
          label: "自住"
        },
        {
          value: "2",
          label: "出租"
        },
        {
          value: "3",
          label: "商铺"
        },
        // {
        //   value: "4",
        //   label: "闲置"
        // },
        {
          value: "5",
          label: "营业场所"
        },
        {
          value: "6",
          label: "住房商用"
        },
        {
          value: "0",
          label: "未定义"
        }
      ],
      // 默认图片
      imgs: require("@/assets/imgs/houtai/wutu.png"),

      // 家庭成员
      tableData: [],
      // 查询返回
      asideShow: false,
      unitShow: false,
      pageResult: [],
      filters: {
        CID: "",
        fangtype: "",
        name: "",
        buildName: "",
        unitName: "",
        floorName: ""
      },
      pageRequest: {
        page: 1,
        pageSize: 10
      },
      columns: [],
      loading: false,
      totalSize: 0,
      exportUrl: this.global.baseUrl + "/self_test_stat/export",
      exportLoading: false,
      // 一户一档列表
      oneHouseList: [],
      operation: false, // true:新增, false:编辑
      // 新增编辑界面是否显示
      dialogVisible: false,
      // 新增编辑界面数据
      dataForm: {
        address: ""
      },

      familyArr: [],
      dictList: {}
    };
  },
  mounted() {
    this.filters.CID = localStorage.getItem("home_CID");
    this.getList();
    this.dictList = JSON.parse(sessionStorage.getItem("dictData"));
    this.getCommunityList();
  },
  methods: {
    // 小区查询
    getCommunityList() {
      this.villageList = this.$store.state.village.villageList;
    },

    //获取房间列表
    getList(val) {
      let that = this;
      that.loading = true;
      let filters = this.filters;
      let params = {
        page: val ? "" : this.pageRequest.page,
        limit: val ? "" : this.pageRequest.limit,
        CID: filters.CID,
        name: filters.name,
        buildName: filters.buildName,
        unitName: filters.unitName,
        floorName: filters.floorName
      };
      let param = JSON.stringify(params);
      // 获取列表数据
      this.$api.personnel.sys_visitor_house_statistic(param).then((res) => {
        that.loading = false;
        that.totalSize = res.data.total || 0;
        that.tableData = res.data.res;

        // 由于列表数据无中文名称，将 tableData 和 villageList 列表中同时存在的 CID 字段进行匹配，获取  villageList 列表中的中文名
        that.tableData.forEach((item) => {
          this.villageList.map((val) => {
            if (item.CID == val.CID) {
              item.CIDD = val.name;
            }
          });
        });
      });
    },

    // 家庭成员
    family(row) {
      let that = this;
      this.dialogTableVisible = true;
      setTimeout(function () {
        // this.$refs.mychild.$emit('parentHandleclick',row.HID)  //方法1
        that.$refs.mychild.parentHandleclick(row.HID); //方法2
      }, 200);
    },
    //关闭弹窗
    handleClose() {
      this.dialogTableVisible = false;
      this.$refs.mychild.closeWin(); //方法2
    },
    // 查询一户
    handleQuery(val) {
      this.pageRequest.page = 1;
      this.getList(val);
    },
    // 翻页
    refreshPageRequest(val) {
      this.pageRequest.page = val;
      this.getList();
    },
    // 新增
    handleAdd() {
      this.dialogVisible = true;
      this.operation = true;
    },
    // 编辑
    handleEdit(row) {
      this.info = row;
      this.dialogmarkVisible = true;
    },
    handleChange(e) {
      //  console.log(e)
    },
    // 拼接图片
    getItemPhoto(id) {
      var url = this.global.baseUrlImage + "avatar/" + id;
      return url;
    },
    //更新房户数据
    updata() {
      let that = this;
      let loadingInstance = Loading.service({ fullscreen: false, lock: true });
      this.$api.home
        .update_owner({
          _id: that.info._id,
          doc: {
            owner_name: that.info.owner_name,
            owner_phone: that.info.owner_phone,
            fangtype: that.info.fangtype,
            fangmark: that.info.fangmark,
            remark: that.info.remark,
            kongxian: that.info.kongxian
          }
        })
        .then((res) => {
          loadingInstance.close();
          if (res.ok == 1) {
            that.$message("修改成功");
            that.dialogmarkVisible = false;
          } else {
            that.$message.error("修改失败");
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.dialogTab {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.owner {
  flex: 2;
}
.friends {
  margin-left: 10px;
  flex: 4;
}
.friendOne {
  display: flex;
  margin-bottom: 20px;
}
.relat {
  display: flex;
  align-items: center;
  margin: 0 10px;
  height: 120px;
}
p {
  margin-bottom: 5px;
}
.sta {
  display: inline-block;
  text-align-last: justify;
  text-align: justify;
  text-justify: distribute-all-lines; // 这行必加，兼容baiie浏览器
  width: 70px;
}

.block1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 10px;
}
.el-select-dropdown__item {
  padding-left: 15px;
  box-sizing: border-box;
}
</style>
